<template>
  <n-cascader style="width: 300px;" check-strategy="child" v-model:value="selectedValues" :options="provinceCityCountyOptions" :props="{ expandTrigger: 'hover' }"
      @update:value="handleSelect">
      <template #suffixIcon>
          <n-icon>
              <arrow-down-bold />
          </n-icon>
      </template>
  </n-cascader>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 省市县数据
const provinceCityCountyOptions = ref([
  {
      value: '110000',
      label: '北京市',
      children: [
          {
              value: '110100',
              label: '市辖区',
              children: [
                  { value: '110101', label: '东城区' },
                  { value: '110102', label: '西城区' },
                  // ... 其他区
              ]
          }
      ]
  },
  // ... 其他省份
])

// 选中的值
const selectedValues = ref([])

// 选择处理
const handleSelect = (values: string[]) => {
  console.log('Selected:', values)
}
</script>